<template>
	<view class='clothes-detail'>
		<swiper circular='true' indicator-dots="true" indicator-color="#C6C6C6" indicator-active-color="#ffffff">
			<swiper-item v-for="(item, index) in splitImg" :key='index'>
				<view class="item-box">
					<image :src="item" mode="aspectFill"></image>
					<view class="like" v-if='info.uid'>
						<view class="icon"></view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="title">{{info.goods_name}}</view>
		<view v-if="isRecommend" class="func-box">
			<text class="total-want">{{info.like_number}}人想要</text>
			<func-bar :goodid="info.id" :islike="info.uid" :like="info.like_number" :comment="info.comment_number" :share="info.share_number"
			 @praise="praise" @comment="comment"></func-bar>
		</view>
		<view class="detail">
			<view class="title">商品详情</view>
			<view class="content">
				<feng-parse :content="info.goods_content"></feng-parse>
			</view>
		</view>
	</view>
</template>

<script>
	import FuncBar from '@/components/func-bar/func-bar'
	import fengParse from '@/components/feng-parse/parse'
	import storage from '@/commen/utils/storage'
	import {
		getUserInfo,
		goodsShare
	} from '@/commen/js/config.js'
	
	export default {
		data() {
			return {
				info: {}, // 商品信息
				isRecommend: false, // 是否为推荐商品
				index: -1, // 当前商品在上一页中的位置
				productInfo: '', // 字符串格式的数据
			}
		},
		computed: {
			// 数组格式的图片
			splitImg() {
				return this.info.goods_img ? this.info.goods_img.split(',') : ''
			}
		},
		components: {
			FuncBar,
			fengParse
		},
		onShareAppMessage(res) {
			this.shareApp()
			return {
				title: '衣知猫',
				path: `pages/index/clothes-detail/clothes-detail?id=${storage.get('id', 'userinfo')}&productInfo=${this.productInfo}`
			}
		},
		onLoad(ops) {
			if (ops.id) {
				storage.set('referrerId', ops.id)
			}
			this.info = JSON.parse(decodeURIComponent(ops.productInfo))
			this.isRecommend = ops.type == 0 ? true : false
			this.index = ops.index
			this.productInfo = ops.productInfo
		},
		onShow() {
			uni.$emit('updateToekn')
			this.getUserInfo()
		},
		methods: {
			// 获取个人资料
			async getUserInfo() {
				if (storage.get('token')) {
					const params = {
						token: storage.get('token')
					}
					const [err, res] = await getUserInfo(params)
					if (res && res.info) {
						storage.set('userinfo', res.info)
					}
				}
			},
			// 分享
			async shareApp() {
				const params = {
					token: storage.get('token') || '',
					goods_id: this.info.id
				}
				const [err, reqres] = await goodsShare(params)
				if (reqres) {
					this.$toast('分享成功')
					this.info.share_number++
					uni.$emit('clotheShare', {
						shareNumber: this.info.share_number,
						index: this.index
					})
				}
			},
			// 点赞，取消点赞
			praise(data) {
				if (data.isLike) {
					this.info.like_number++
				} else {
					this.info.like_number--
				}
				this.info.uid = data.isLike
				uni.$emit('clothePraise', {
					isLike: data.isLike,
					index: this.index
				})
			},
			// 评论
			comment(data) {
				this.info.comment_number++
				uni.$emit('clotheComment', {
					index: this.index
				})
			}
		}
	}
</script>

<style lang='scss' scoped>
	@import '@/static/scss/config.scss';
	@import '@/static/scss/mixin.scss';

	.clothes-detail {
		@include box-w(100%);

		swiper {
			@include box(100%, 1125rpx);

			swiper-item {
				.item-box {
					position: relative;
					@include square(100%);

					image {
						@include square(100%);
					}

					.like {
						@include right-bottom(82rpx, 46rpx);
						@include circle(76rpx);
						@include flex-row();
						background-image: url('');

						.icon {
							@include box(32rpx, 28rpx);
							background: url('') no-repeat center/contain;
							margin-top: 1rpx;
						}
					}
				}

			}
		}

		&>.title {
			padding: 30rpx 20rpx 0;
			margin-bottom: 20rpx;
			@include font-set($font-a, $color-c);
			@include font-hide();
			text-align: center;
		}

		.func-box {
			@include font-set($font-c, $color-d);
			@include flex-col();

			func-bar {
				margin-top: 20rpx;
			}
		}

		.detail {
			@include box-w(100%);

			.title {
				@include font-set($font-c, $color-g);
				text-align: center;
				margin-top: 60rpx;
				padding-bottom: 30rpx;
			}

			.content {
				text {
					@include box-b(100%, auto);
					@include font-set($font-b, $color-c);
					padding: 24rpx 32rpx 60rpx;
					word-wrap: break-word;
				}

				& /deep/ image {
					display: block !important;
					width: 100% !important;
				}
			}
		}
	}
</style>
